<template>
  <div class="component-root-container">
    <el-header>
      <el-form
        ref="formRule"
        :rules="formRule"
        :model="queryParams"
        label-position="right"
        label-width="130px"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="所属省份编码:" prop="provinceCode">
              <el-input
                v-model="queryParams['provinceCode']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属地市编码:" prop="orgCode">
              <el-input
                v-model="queryParams['orgCode']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目编码:" prop="projectCode">
              <el-input
                v-model="queryParams['projectCode']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :span="8">
          <el-col :span="8">
            <el-form-item label="物料编码:" prop="categoryCode">
              <el-input
                v-model="queryParams['categoryCode']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出库单明细行号:" prop="batchLineId">
              <el-input
                v-model="queryParams['batchLineId']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="8" class="col_button">
            <div class="button">
              <el-button class="query" @click="buttonClick">
                查询
              </el-button>
              <el-button class="query" @click="reset">
                重置
              </el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-header>
    <el-main>
      <div class="contentInfo" style="margin-bottom:20px;">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            场景使用情况
          </el-col>
        </el-row>
        <el-row>
          <div class="inline">
            <div>
              <span>调用次数/日：</span><span>{{ query.count }}</span>
            </div>
            <div>
              <span>拦截比率：</span><span>{{ query.rate }}</span>
            </div>
            <div>
              <a
                class="link"
                href="javascript:;"
                @click="$router.push({ name: 'biz-ml' })"
                >详情</a
              >
            </div>
          </div>
        </el-row>
      </div>
      <div class="contentInfo">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            场景说明
          </el-col>
        </el-row>
        <el-row>
          <div class="page-tip">
            <div class="description">
              根据审计整改需求，将现有异常数据修改流程中主设备调减场景进行优化，运用内存数据库能力，在PMS系统进行主设备退库环节校验物资是否合规：1、判断商合交易系统订单是否有效。2、判断商合交易系统订单是否有过单价调整。3、判断主数据供应商编码是否有效。4、在财务系统根据采购订单号查询是否已经支付。
            </div>
          </div>
          <div class="page-tip">
            <div class="params-tip" @click.ctrl.alt="clickExample">
              <span >示例参数</span>：所属省分编码:620000, 所属地市编码:621100,
              项目编码:19B01GSDX0800002, 物料编码:01110102021800,
              出库单明细行号:20201207170556064256786
            </div>
          </div>
        </el-row>
      </div>
    </el-main>

    <el-main>
      <div class="contentInfo">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            校验结果
          </el-col>
        </el-row>
        <el-row>
          <div class="page-tip">
            <div class="description">
              <el-row v-for="(item, index) in dialogData" :key="index">
                <el-col>
                  校验结果: {{ item.verifyCode == "1" ? "通过" : "未通过" }}
                </el-col>
                <el-col> 校验返回信息: {{ item.returnMsg || "无" }} </el-col>
                <el-col> 出库单明细行号: {{ item.batchLineId }} </el-col>
                <el-col> 物料编码: {{ item.categoryCode }} </el-col>
              </el-row>
            </div>
          </div>
        </el-row>
      </div>
    </el-main>
  </div>
</template>

<script>
import mixin from './mixins'
export default {
  name: "equipmentLegalVerify", //主设备退库合规性校验
  mixins: [mixin],
  data() {
    return {
      query: {
        count: 0,
        rate: "--"
      },
      dialogData: [],
      queryParams: {
        provinceCode: "", // 所属省分编码
        orgCode: "", // 所属地市编码
        projectCode: "", // 项目编码
        categoryCode: "", // 物料编码
        batchLineId: "" // 出库单明细行号
      },

      formRule: {
        provinceCode: [
          { required: true, message: "请输入所属省份编码", trigger: "blur" }
        ],
        orgCode: [
          { required: true, message: "请输入所属地市编码", trigger: "blur" }
        ],
        projectCode: [
          { required: true, message: "请输入项目编码", trigger: "blur" }
        ],
        categoryCode: [
          { required: true, message: "请输入物料编码", trigger: "blur" }
        ],
        batchLineId: [
          { required: true, message: "请输入出库单明细行号", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.queryPageCount("4.8");
  },
  mounted() {},
  methods: {
    async buttonClick() {
      try {
        await this.$refs["formRule"].validate();
        this.dialogData = [];
        var params = {
          datas: {
            provinceCode: this.queryParams.provinceCode,
            orgCode: this.queryParams.orgCode,
            projectCode: this.queryParams.projectCode,
            categoryCode: this.queryParams.categoryCode,
            batchLineId: this.queryParams.batchLineId
          }
        };
        //console.log(params)
        const r = await this.$http({
          url: this.$http.adornBizUrl("/mainEquipment/returnWarehouse"),
          method: "post",
          data: this.$http.adornData("param=" + JSON.stringify(params), false),
          headers: {
            "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
          }
        });
          //console.log(r)
          // this.dialogData = r.data.data;
        if (Array.isArray(r.data.data)) {
          this.dialogData = r.data.data;
        } else {
          this.dialogData = [r.data.data];
        }
    
      } catch (e) {
        console.log(e);
      } finally {
      }
    },
    reset() {
      this.queryParams = {
        provinceCode: "",
        orgCode: "",
        projectCode: "",
        categoryCode: "",
        batchLineId: ""
      };
      this.dialogData = [];
      this.$refs["formRule"].clearValidate();
    },
    change(e) {
      this.$forceUpdate();
    },
    async queryPageCount(scene) {
      try {
        const r = await this.$http({
          url: this.$http.adornBizUrl("/log/queryStatistics"),
          method: "post",
          data: this.$http.adornData(
            "param=" + JSON.stringify({ scene: scene }),
            false
          ),
          headers: {
            "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
          }
        });
        if (r.data.data && r.data.data.length > 0) {
          var result = r.data.data[0];
          this.query.count = result.cnt || "0";
          this.query.rate =
            result.per == null ? "--" : (result.per * 100).toFixed(1) + "%";
        }
      } catch (e) {
        console.log(e);
      } finally {
      }
    }
  }
};
</script>

<style scoped lang="scss">
@import "../../../assets/scss/_formatQueryPage";
@include formatQueryPage(130px, 60%, right);
.el-input {
  width: 60%;
}

.el-select {
  width: 60%;
}

.query {
  color: rgba(255, 255, 255, 1);
  background: rgba(235, 75, 75, 1);
  border-radius: 6px;
  border-color: rgba(235, 75, 75, 1);
}
</style>
